import { NImage } from "naive-ui";
import type { ImageProps } from "naive-ui";
import type { HTMLAttributes } from "vue";
import type { BaseComponentType } from "../types";
import { getSlotsDom } from "../utils";
export type ImageFactoryConstructorType = {
  props?: ImageProps;
  attrs?: HTMLAttributes;
  placeholderSlot?: BaseComponentType;
  errorSlot?: BaseComponentType;
};
export class ImageFactory {
  private props: ImageProps = {};
  private attrs: HTMLAttributes = {};
  private placeholderSlot: BaseComponentType = null;
  private errorSlot: BaseComponentType = null;

  constructor(data?: ImageFactoryConstructorType) {
    if (data?.props) this.setProps(data.props);
    if (data?.attrs) this.setAttrs(data.attrs);
    if (data?.placeholderSlot) this.setPlaceholder(data.placeholderSlot);
    if (data?.errorSlot) this.setError(data.errorSlot);
  }

  setAttrs(attrs: HTMLAttributes) {
    this.attrs = attrs;
    return this;
  }
  setProps(props: ImageProps) {
    this.props = props;
    return this;
  }
  setPlaceholder(component: BaseComponentType) {
    this.placeholderSlot = component;
    return this;
  }
  setError(component: BaseComponentType) {
    this.errorSlot = component;
    return this;
  }
  create() {
    return (
      <NImage {...this.attrs} {...this.props}>
        {{
          placeholder: () => getSlotsDom(this.placeholderSlot),
          error: () => getSlotsDom(this.errorSlot),
        }}
      </NImage>
    );
  }
}
